<template>
  <view class="work-container">
    <view class="work-tabs">
      <view
        v-for="tab in [1,3,4]"
        :key="tab"
        :class="['tab-item', {active: activeTab === tab}]"
        @click="activeTab = tab"
      >
        {{ ORDER_TYPE_MAP[tab] }}
      </view>
    </view>
    <view
      class="pay-card"
      v-for="item in filteredList"
      :key="item.id"
    >
      <view class="card-main-row" @click="showDetail(item)">
        <view class="card-title-status-row">
          <view class="card-title">{{ item.chName || '-' }}</view>
          <view class="card-status-row">
            <text :class="item.orderStatus === 1 ? 'status-paid' : 'status-unpaid'">
              {{ item.orderStatus === 1 ? '已缴费' : '未缴费' }}
            </text>
          </view>
        </view>
        <view class="card-amount">￥{{ item.totalPrice !== null ? ((item.totalPrice)).toFixed(2) : '-' }}</view>
      </view>
      <view class="card-remark-row">
        <text class="card-remark">{{ item.remark || '' }}</text>
      </view>
      <view class="card-time-row">
        <text class="card-time">{{ formatTime(item.createTime) }}</text>
        <text class="card-orderNo">{{ item.orderNo }}</text>
      </view>
    </view>
    <view v-if="filteredList.length === 0" class="empty-data-block">
      <image src="/static/images/empty.png" class="empty-icon" mode="aspectFit" />
      <view class="empty-text">暂无数据</view>
    </view>

    <!-- 详情弹窗 -->
    <uni-popup ref="detailPopup" type="center">
      <view class="popup-detail-card">
        <view class="success-header">
          <uni-icons type="checkbox-filled" color="#07c160" size="48" v-if="getPayStatus(detailList) === '已缴费'" />
          <uni-icons type="close" color="#f56c6c" size="48" v-else />
          <view class="success-title">{{ getPayStatus(detailList) }}</view>
        </view>
        <view class="pay-detail-main">
          <view class="main-row">
            <text class="main-label">房东姓名：</text>
            <text class="main-value">{{ getDetailValue('房东姓名') }}</text>
          </view>
          <view class="main-row">
            <text class="main-label">订单号：</text>
            <text class="main-value">{{ getDetailValue('订单号') }}</text>
          </view>
          <view class="main-row">
            <text class="main-label">金额：</text>
            <text class="main-value highlight">￥{{ getDetailValue('金额') }}</text>
          </view>
          <view class="main-row">
            <text class="main-label">备注：</text>
            <text class="main-value">{{ getDetailValue('备注') }}</text>
          </view>
          <view class="main-row">
            <text class="main-label">创建时间：</text>
            <text class="main-value">{{ getDetailValue('创建时间') }}</text>
          </view>
          <view class="main-row">
            <text class="main-label">缴费状态：</text>
            <text class="main-value" :class="getPayStatus(detailList) === '已缴费' ? 'status-paid' : 'status-unpaid'">{{ getPayStatus(detailList) }}</text>
          </view>
        </view>
        <view v-if="detailDetails.length" class="detail-list-title">明细</view>
        <view v-if="detailDetails.length" class="detail-list-table">
          <view class="detail-list-header">
            <text class="detail-th">地址</text>
            <text class="detail-th">单价</text>
            <text class="detail-th">数量</text>
            <text class="detail-th">金额</text>
          </view>
          <view v-for="d in detailDetails" :key="d.id" class="detail-list-row">
            <text class="detail-td">{{ d.address }}</text>
            <text class="detail-td">￥{{ d.unitPrice !== null ? (Number(d.unitPrice)).toFixed(2) : '-' }}</text>
            <text class="detail-td">{{ d.buyCount || '-' }}</text>
            <text class="detail-td">￥{{ d.totalPrice !== null ? (Number(d.totalPrice)).toFixed(2) : '-' }}</text>
          </view>
        </view>
        <view class="popup-close" @click="closeDetail">关闭</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getOrderList, getOrderDetailInfo } from '@/api/login';

export default {
  name: 'HomeWorkbench',
  data() {
    return {
      payList: [],
      activeTab: 1, // 默认运维费
      ORDER_TYPE_MAP: {
        1: '运维费',
        3: '门禁卡',
        4: '人脸'
      },
      detailList: [],
      detailDetails: []
    }
  },
  computed: {
    filteredList() {
      return this.payList.filter(item => 
        item.type === this.activeTab && item.orderStatus === 1
      );
    }
  },
  mounted() {
    this.fetchOrderList();
  },
  methods: {
    async fetchOrderList() {
      try {
        const res = await getOrderList({
          pageNum: 1,
          pageSize: 70000,
          openid: uni.getStorageSync('wechat_openid') || 'ogn8r6iDAnrBUuSY2YevKaDP3CSc'
        });
        if (res.code === 200 && res.rows) {
          this.payList = res.rows;
        } else {
          this.payList = [];
        }
      } catch (e) {
        this.payList = [];
      }
    },
    formatTime(val) {
      if (!val) return '';
      // 兼容 T 和毫秒
      let d = val.replace('T', ' ').replace(/\.\d+\+08:00$/, '');
      if (d.length === 19) return d;
      // yyyy-MM-dd HH:mm:ss
      return d.slice(0, 19);
    },
    async showDetail(item) {
      try {
        const res = await getOrderDetailInfo(item.id);
        if (res && res.code === 200 && res.data) {
          const data = res.data;
          this.detailList = [
            { label: '房东姓名', value: data.chName || '-' },
            { label: '订单号', value: data.orderNo },
            { label: '金额', value: data.totalPrice !== null ? (Number(data.totalPrice)).toFixed(2) : '-' },
            { label: '备注', value: data.remark || '-' },
            { label: '创建时间', value: this.formatTime(data.createTime) },
            { label: '缴费状态', value: data.orderStatus === 1 ? '已缴费' : '未缴费' }
          ];
          this.detailDetails = data.details || [];
          this.$refs.detailPopup.open();
        } else {
          uni.showToast({ title: '获取详情失败', icon: 'none' });
        }
      } catch (e) {
        uni.showToast({ title: '网络错误', icon: 'none' });
      }
    },
    closeDetail() {
      this.$refs.detailPopup.close();
    },
    getPayStatus(list) {
      const row = list.find(row => row.label === '缴费状态');
      return row ? row.value : '';
    },
    getDetailValue(label) {
      const row = this.detailList.find(row => row.label === label);
      return row ? row.value : '';
    }
  }
}
</script>

<style lang="scss" scoped>
.work-container {
  background-color: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 32rpx;
}
.work-tabs {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #eee;
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 24rpx 0;
    font-size: 30rpx;
    color: #888;
    cursor: pointer;
  }
  .tab-item.active {
    color: #3c96f3;
    font-weight: bold;
    border-bottom: 4rpx solid #3c96f3;
  }
}
.pay-card {
  background: #fff;
  border-radius: 36rpx;
  margin: 32rpx 32rpx 0 32rpx;
  padding: 40rpx 36rpx 28rpx 36rpx;
  position: relative;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.06);
  overflow: hidden;
}
.card-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 0;
}
.card-title-status-row {
  display: flex;
  align-items: center;
}
.card-title {
  font-size: 36rpx;
  color: #222;
  font-weight: 700;
  margin-bottom: 0;
}
.card-type, .card-amount, .card-status-row {
  margin-right: 24rpx;
}
.card-type {
  font-size: 24rpx;
  margin-left: 8rpx;
}
.card-amount {
  font-size: 44rpx;
  color: #07c160;
  font-weight: bold;
  margin-bottom: 0;
  margin-left: auto;
}
.card-status-row {
  display: flex;
  align-items: center;
  margin-left: 18rpx;
}
.card-status {
  font-size: 24rpx;
  margin-left: 8rpx;
}
.status-paid {
  color: #07c160;
  font-weight: bold;
}
.status-unpaid {
  color: #f56c6c;
  font-weight: bold;
}
.card-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18rpx;
}
.card-info-left {
  display: flex;
  gap: 32rpx;
}
.card-info {
  font-size: 26rpx;
  color: #666;
}
.card-info-right {
  font-size: 24rpx;
  color: #bbb;
}
.card-order-row {
  margin-top: 16rpx;
}
.card-order {
  font-size: 22rpx;
  color: #bbb;
}
.card-remark-row {
  margin-top: 8rpx;
}
.card-remark {
  font-size: 24rpx;
  color: #888;
}
.card-time-row {
  margin-top: 4rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-time {
  font-size: 22rpx;
  color: #bbb;
}
.card-orderNo {
  font-size: 22rpx;
  color: #bbb;
  margin-left: 32rpx;
}

/* 弹窗详情卡片 */
.uni-popup .popup-detail-card {
  background: #fff;
  border-radius: 20rpx;
  width: 600rpx;
  max-width: 90vw;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.10);
  padding: 32rpx 24rpx 24rpx 24rpx;
}
.success-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32rpx;
}
.success-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #07c160;
  margin-top: 12rpx;
}
.pay-detail-card {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18rpx 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: 30rpx;
}
.detail-row:last-child {
  border-bottom: none;
}
.label {
  color: #888;
}
.value {
  color: #222;
  font-weight: 500;
}
.value.highlight {
  color: #e54d42;
  font-size: 32rpx;
  font-weight: bold;
}
.popup-close {
  text-align: center;
  margin-top: 32rpx;
  color: #07c160;
  font-size: 30rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
}
.empty-data-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 120rpx;
  color: #bbb;
}
.empty-icon {
  width: 180rpx;
  height: 180rpx;
  margin-bottom: 24rpx;
  opacity: 0.7;
}
.empty-text {
  font-size: 30rpx;
  color: #bbb;
}
.detail-list-title {
  margin-top: 24rpx;
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}
.detail-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 26rpx;
  color: #666;
  padding: 8rpx 0;
}
.pay-detail-main {
  margin-bottom: 18rpx;
}
.main-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}
.main-label {
  color: #888;
  font-size: 26rpx;
  min-width: 120rpx;
}
.main-value {
  color: #222;
  font-size: 26rpx;
  font-weight: 500;
  word-break: break-all;
}
.main-value.highlight {
  color: #e54d42;
  font-size: 30rpx;
  font-weight: bold;
}
.status-paid {
  color: #07c160;
  font-weight: bold;
}
.status-unpaid {
  color: #f56c6c;
  font-weight: bold;
}
.detail-list-table {
  margin-top: 8rpx;
  border-radius: 12rpx;
  background: #f7f8fa;
  padding: 8rpx 0;
}
.detail-list-header {
  display: flex;
  font-size: 24rpx;
  color: #888;
  font-weight: bold;
  padding: 8rpx 0;
  border-bottom: 1px solid #eee;
}
.detail-th {
  flex: 1;
  text-align: center;
}
.detail-list-row {
  display: flex;
  font-size: 24rpx;
  color: #666;
  padding: 12rpx 0;
  border-bottom: 1px solid #f0f0f0;
}
.detail-list-row:last-child {
  border-bottom: none;
}
.detail-td {
  flex: 1;
  text-align: center;
  word-break: break-all;
}
</style> 